<template>
  <div>
    <Container>
      <el-alert
        :closable="false"
        :title="`共 10 条记录`"
        type="info"
        show-icon
      >
      </el-alert>
      <!-- 表格区域 -->
      <el-table :data="list" style="width: 100%">
        <el-table-column align="center" prop="type" label="操作类型">
        </el-table-column>
        <el-table-column align="center" prop="username" label="操作人">
        </el-table-column>
        <el-table-column align="center" prop="result" label="执行结果">
        </el-table-column>
        <el-table-column align="center" prop="createTime" label="操作时间">
        </el-table-column>
        <el-table-column align="center" prop="describe" label="描述">
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="page.pagesize"
        layout=" prev, pager, next, sizes, jumper"
        :total="count"
      >
      </el-pagination>
    </Container>
  </div>
</template>

<script>
export default {
  name: 'Dailys',
  data () {
    return {
      row: {
        type: 'CN',
        username: '彭平',
        result: '品等认时确结至多别心到路时拉眼适热报回写问极过科到较至。',
        createTime: '2011-03-25 00:08:40',
        describe: '33.08'
      },
      page: {
        page: 1,
        pagesize: 10,
        disabled: 1,
        username: ''
      },
      count: 0
    }
  },
  computed: {
    list () {
      const num = 10
      const data = []
      for (let i = 0; i <= num; i++) {
        data.push(this.row)
      }
      return data
    }
  },
  methods: {
    // 分页功能
    handleSizeChange (val) {
      this.page.pagesize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.page.page = val
      this.getList()
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .el-pagination {
  margin-top: 20px;
  text-align: right;
}
</style>
